<template>
    <div id="contain" >
        <h1>系统登录</h1>
        <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
            <el-input v-model.number="loginForm.captcha" type="text" class="captcha"></el-input>
            <span v-loading="loading" class="captcha-svg">
              <i v-html="Captcha" @click="getCaptcha"></i>
            </span>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
            <!-- <el-button @click="resetForm('loginForm')">重置</el-button> -->
        </el-form-item>
        <!-- 手机登入图标按钮 -->
        <el-form-item>
          <div class="sms">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-iphone"></use>
            </svg>
            <a href="javascript:;" @click="$emit(`changeSmsType`)">切换短信登入</a>
          </div>
        </el-form-item>
    </div>
</template>
<script>
import * as api  from "@/api/users"
export default{
  mounted(){
  
  },
  created(){
    this.getCaptcha()
  },
    data(){
      return {
        loading:false,
        isSmsLogin: true,
        Captcha:"",//验证码
        loginForm:{
          username:"",
          password:"",
          captcha:""
        }
      }
    },
    // 因为el-form在父组件，校验需要在父组件完成
    // 1.所以需要先把v-model中的Loginform数据先传过去
    // 2.然后通过提交事件触发父组件的获取loginForm的值进行校验
    
    // 1.通过watch监听Loginform的变化
    watch:{
      loginForm:{
        handler(newVal){
          // console.log(newVal);
          this.$emit("syncLoginForm",newVal);
        },
        deep:true
      }
    },
    methods:{
      submitForm(){
        this.$emit("submit")
      },
      // 封装一个获取验证码的方法
      getCaptcha(){
        this.loading=true
        api.getCaptcha()
        .then(res=>{
            // console.log(res);
            this.Captcha=res.data.img
            this.loading=false
        })
      }
    },
    

}
</script>

<style  lang="less"  scoped>
body{
    padding:0;
    margin:0 !important;
}
/deep/.captcha{
width:80px;
height: 40px;
vertical-align:top;
}
.captcha-svg {
          background: #fff;
          display: inline-block;
          height: 40px;
          width: 100px;
          text-align: center;
          cursor: pointer;
          border: 0;
          border-radius: 0px 5px 5px 0;
          /deep/svg{
            width:100px;
          }
}

#contain{
    position:relative;
    display:flex;
    left:0;
    flex-direction: column;
    // justify-content:center;
    // align-items:center;
    // align-content:center;
}

input .el-input__inner{
width:  200px;

}
/deep/.el-button{
    width:260px;
    margin-left:-80px;
}  

form a{
  // text-decoration: none;
  color:white;
}

/deep/.el-form-item__label{
  text-align:center;
  color:#fff
}
.sms{
  margin-left:-80px!important;
  width:260px!important;
  text-align:center;
  font-size:20px;
}

</style>